<template>
    <div>
        <!-- 大轮播 -->
        <film-swiper :key="datalist.length">
            <film-swiper-item v-for="data in datalist" :key="data.filmId" class="filmswiperitem">
               <img :src="data.poster" alt="">
            </film-swiper-item>
        </film-swiper>

        <film-header class="sticky"></film-header>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/components/films/FilmSwiper'
import filmHeader from '@/components/films/FilmHeader'
import filmSwiperItem from '@/components/films/FilmSwiperItem'
import axios from 'axios'

export default {
    data() {
        return {
            datalist:[]
        }
    },
    mounted() {
        axios.get('http://localhost:8080/maoyan.json').then(res=>{
            // console.log(res.data);
            this.datalist = res.data.data.films
        })
    },
    /*  全局*/
    components: {
        filmSwiper,
        filmSwiperItem,
        filmHeader
    }
}
</script>

<style lang="scss" scoped>
        img{
            width: 20.6667rem;
            height: 16.6667rem;
        }

    
.sticky{
    position:sticky;
    top:0;
    background: white;
    z-index: 100;
}
</style>